Product Design System · CoreFlow · Phase 2
One consistent component set. Every CoreFlow screen, and every screenshot in the learning ecosystem, is built from exactly these parts.
Royal CoreFlow blue for action, calm slate for structure, teal for positive states, with semantic amber, red, and purple for status.
Plus Jakarta Sans across the product; IBM Plex Mono for data, codes, and labels.
One primary action per view. Secondary and ghost for everything else.
Inputs, selects, search, checkboxes, and toggles.
Status pills carry consistent meaning across every module. Avatars use initials on brand-tinted fills.
The building blocks of the Home Dashboard and every module overview.
How list-based modules, Customer Hub, Team Hub, Billing, present their data.
| Customer | Industry | Status | Last visit | |
|---|---|---|---|---|
BRBlue Ridge Hotel | Hospitality | Active | Jul 2 | |
SFSunrise Fitness | Fitness | Pending | Jul 1 | |
ACAcme Coffee | Retail | Active | Jun 28 |
The sidebar navigation and top bar that frame every screen, module names straight from the Foundation Brief.
Next: the full Home Dashboard screen, built entirely from these components, signed in as Sarah Mitchell at Riverside Wellness.
CoreFlow is a fictional product created by The Training Desk for demonstration purposes.
Product Design System v1.0 · Phase 2